---
title: "Component Theme"
description: "Get to know how to customize component-specific themes in Kuma UI"
---

import { PrimaryButton, ExampleContainer } from "../../../components/example";
import { Callout } from "nextra-theme-docs";

# Component Theme

In Kuma UI, you can define default and variant styles for your components globally in your theme. This feature provides a consistent look and feel across your application while allowing for extensive customization.

## Defining Component Styles

Component styles are defined in the `components` field of your theme. Each component can have a `defaultProps` and `variants`.

<Callout type="warning">
  You can also define `baseStyle` for each component but it's deprecated and
  will be removed in v2.0. Use `defaultProps` instead.
</Callout>

Here's an example of how you can define a `primary` variant and make it default for the `Button` component:

```ts
const theme = createTheme({
  components: {
    Button: {
      defaultProps: {
        variant: "primary",
        borderRadius: "14px",
        p: "16px 32px",
        fontWeight: 600,
        _hover: {
          opacity: 0.8,
        },
      },
      variants: {
        primary: {
          bg: "#576ddf",
          color: "white",
        },
        secondary: {
          bg: "white",
          color: "#576ddf",
        },
      },
    },
  },
});
```

## Using Component Styles

### Default Props

`defaultProps` are applied to all instances of a component by default. For example, with the above theme configuration, you can apply the `primary` variant to a `Button` like so.

## Variants

Variants offer a way to apply different styles to components based on a prop. For example, with the above theme configuration, you can apply the `primary` variant to a `Button` like so:

<ExampleContainer>
  <PrimaryButton />
</ExampleContainer>
```tsx
<Button variant="primary">I'm a primary button</Button>
```

This approach gives you a lot of flexibility in terms of styling your components and ensuring consistency across your application.

Remember, Kuma UI is a headless library, which means styles are not applied unless you define them in your theme. Define your component styles and unleash the power of Kuma UI!
